<template>
  <!-- 多联系人动态表单和验证 -->
  <el-form 
    ref="contactFormRef"
    :model="formItem" 
    :rules="rules"
    label-width="110px"
    :disabled="props.state == 'check'"
  >
    <el-row v-for="(item, index) in formItem.list" :key="index" style="display: block;">
      <el-col :span="24">
        <div class="btn-toolsbar">
          <span v-show="item.active" class="btn-toggle"><el-button
            :icon="ArrowDown"
            size="small"
            circle
            @click="handleToggle(item)"
            />
          </span>
          <span v-show="!item.active" class="btn-toggle"><el-button
            :icon="ArrowUp"
            size="small"
            circle
            @click="handleToggle(item)"
            />
          </span>
          <span class="btn-toggle"><el-button
            :icon="Close"
            size="small"
            circle
            @click="handleClose(index)"
          />
          </span>
        </div>
      </el-col>
      <el-row v-show="!item.active">
        <Address
          :ref="(el) => setAddressRef(el, index)"
          :form-data="formItem.list[index]"
          label="收货地址:"
          :span="16"
          :customKey="{
            province: 'province', city: 'city', area: 'area', detailAddress: 'detailAddress'
          }"
          :prop="'list.' + index "
        ></Address>
        <el-col :span="8">
          <el-form-item 
            label="联系人:" 
            :prop="'list.' + index + '.contactName'"
            :rules="[{ required: true, message: '请输入联系人', trigger: 'blur', }]"
          >
            <el-input v-model="item.contactName" placeholder="请输入" :disabled="readonly" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item 
            label="联系人手机号:" 
            :prop="'list.' + index + '.contactPhone'"
            :rules="[{ validator: validatePhone, required: true, message: '请输入正确的联系方式', trigger: 'change', }]"
          >
            <el-input v-model="item.contactPhone" placeholder="请输入" :disabled="readonly" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-row>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ArrowDown, ArrowUp, Close } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { validate, isPhone, resetFields } from '@/utils/validate'
import Address from '@/components/Address/Index.vue'

// 组件状态
const props = defineProps({
  state: {
    type: String,
    default: ''
  },
})

const formItem = reactive({
  list: [
    {
      companyOrg: 'GY',
      province: '',
      city: '',
      area: '',
      detailAddress: '',
      contactName: '',
      contactPhone: '',
      // 联系信息当前项展开收缩开关
      active: false,
    },
  ]
})

const reset = () => {
  contactFormRef.value.resetFields() 
}

const rules = reactive({
  contactName: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
})

// 是否只读
const readonly = ref(false)
readonly.value = (props.state == 'check')

// 验证手机
const validatePhone = (rule: any, value: any, callback: any) => {
  if (!isPhone(value)) {
    callback(new Error('请输入正确的手机号'))
  } else {
    callback()
  }
}

// 验证
const contactFormRef = ref(null)
const contactFormValidate = async () => {
  const flag = await validate(contactFormRef)
  return flag
}

const handleToggle = (item: any) => {
  item.active = !item.active
}

const handleClose = (index: any) => {
  if (formItem.list.length == 1) {
    ElMessage.error('请添加至少1条信息！')
    return
  }
  formItem.list.splice(index, 1)
}

const addressRefs = reactive({
  list: [] as any
})

const setAddressRef = (el: any, index: any) => {
  if (el) {
    addressRefs.list[index] = el;
  }
}

const setData = (v: any) => {
  formItem.list = v
}

defineExpose({ formItem, contactFormValidate, reset, setData })

</script>
<style lang="scss" scoped>
.btn-toolsbar {
  position: absolute;
  right: 0;
  top: -35px;
  padding-left: 5px;
  background: #fff;
}
.btn-toggle {
  margin-right: 5px;
}
.el-divider--horizontal {
  margin-top: 12px;
}
</style>
